import React, { PureComponent } from "react";
import footer from "./index.module.css";

export default class Footer extends PureComponent {

  // 计算已完成的任务
  // count = () => {
  //   const { todoList } = this.props;
  //   return todoList.filter((item) => item.isState === true);
  // };


  // 全选的change事件
  handlerCheckAll = (event) => {
    this.props.selectAll(event.target.checked)
  };

  // 清除已完成事件
  clearCompleted = () => {
    this.props.clearCompleted()

  }

  render() {
    const { todoList } = this.props;
    // 计算已完成
    const total = todoList.reduce((pre, current) => current.isState ? pre + 1 : 0, 0)
    return (
      <div className={footer.footer}>
        <div>
          <input
            type="checkbox"
            checked={todoList.length === total && total !== 0}
            onChange={this.handlerCheckAll}
          />
          <span>
            已完成{total}/全部{todoList.length}
          </span>
        </div>
        <button className={footer.clearBtn} onClick={this.clearCompleted}>清除已完成</button>
      </div>
    );
  }
}
